<template>
    <div>
        <h2>房型显示周考3</h2>

        <div>
            <span>房型名称:</span>
            <input type="text" v-model="model.HouseTypeName" />
            <input type="button" value="查询" class="btn btn-success" @click="GetList" />
        </div>
        <table class="table">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>房型名称</td>
                    <td>面积</td>
                    <td>价格</td>
                    <td>是否有窗</td>
                    <td>入住人数</td>
                    <td>是否上架</td>
                    <td>房型图片</td>
                    <td>操作</td>
                </tr>


                <tr v-for="item in data.list " :key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.HouseArea }}/平方米</td>
                    <td>￥{{ item.Price }}元</td>
                    <td>{{ item.IsWindows ? "是" : "否" }}</td>
                    <td>{{ item.PeopleCount }}人</td>
                    <td>{{ item.State ? "上架" : "下架" }}</td>
                    <td><img :src="item.Photo" width="100" height="100"></td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="housedel(item.Id)" />
                        <input type="button" value="编辑" class="btn btn-success" @click="houseupd(item.Id)" />
                        <input type="button" value="下架" class="btn btn-info" v-if="item.State == 1"
                            @click="housestate(item.Id, item.State)" />
                        <input type="button" value="上架" class="btn btn-info" v-if="item.State == 0"
                            @click="housestate(item.Id, item.State)" />

                    </td>
                </tr>
            </tbody>
            <span>总条数:{{ data.count }}</span>
            <span>总页数:{{ data.page }}</span>
            <span>当前:{{ model.index + '/' + data.page }}页</span>

        </table>
        <div>
            <input type="button" value="首页" @click="gopage('a')">
            <input type="button" value="上一页" @click="gopage('b')">
            <input type="button" value="下一页" @click="gopage('c')">
            <input type="button" value="尾页" @click="gopage('d')">
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

//定义分页变量
const data = reactive({
    list: [],
    count: 0,
    page: 0,
})

let model = reactive({
    HouseTypeName: '',
    index: 1,
    size: 3,
})


//实现分页
const gopage = (str: any) => {

    switch (str) {

        //首页
        case 'a':
            if (model.index == 1) {
                return;
            }

            model.index = 1;
            break;

        //上一页
        case 'b':
            if (model.index == 1) {
                return;
            }

            model.index--;
            break;
        //下一页
        case 'c':
            if (model.index == data.page) {
                return;
            }

            model.index++;
            console.log(model.index);
            break;


        //尾页
        case 'd':

            if (model.index == data.page) {
                return;
            }
            model.index = data.page;
            break;

    }
    GetList();

}

onMounted(() => {
    GetList();
})

const GetList = () => {

    axios({
        url: '/api/TestHouseType/TestHouseTypeList',
        method: 'get',
        params: model,
    })

        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count,
                data.page = res.data.page;

        })

        .catch((ree) => {
            console.log(ree);
        })





}


//删除
const housedel = (Id: any) => {
    var f = (confirm('确定要删除吗?'))
    if (f) {

        axios({
            url: '/api/TestHouseType/TestHouseTypeDel',
            method: 'delete',
            params: {
                Id: Id
            },

        })
            .then((res) => {
                console.log(res);

                if (res.data > 0) {
                    alert('删除成功');
                    GetList();
                    return;
                }
                else {
                    alert('删除失败');
                    return;
                }

            })

            .catch((ree) => {
                console.log(ree);
            })


    }


}




//编辑
const houseupd = (Id: any) => {
    router.push({
        path: '/testHouseUpd',
        query: {
            Id: Id,
        }

    })

}



//修改状态
const housestate = (Id: any, State: any) => {

    if (State == 1) {
        State = 0;
    }
    else {
        State = 1;
    }

    axios({
        url: '/api/TestHouseType/TestHouseTypeState',
        method: 'put',
        params: {
            Id: Id,
            State: State,
        }

    })

        .then((res) => {
            console.log(res);

            if (res.data > 0) {
                alert('成功');
                GetList();
                return;
            }
            else {
                alert('失败');
                return;
            }

        })

        .catch((ree) => {
            console.log(ree);
        })






}

</script>

<style scoped></style>